<template>
  <div class="big">
    <!-- 图标区 手指滑动区域 -->
    <div class="dog-wrap" @click="show" ref="dog" @scroll="dogScroll()">
      <ul>
        <li
          v-for="(pic, index) in imgico"
          :key="pic"
          @click="classifyLco(index)"
        >
          <img :src="pic.ico" alt="" />
          <p>{{ pic.title }}</p>
        </li>
      </ul>
    </div>
    <!-- 下面滚动区域   -->
    <div class="line" @click="show2" ref="ico" @scroll="icoScroll()">
      <!-- 要滚动的方块 -->
      <div class="small-line"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgico: [
        {
          ico: "http://81.68.133.139:3000/images/store/tab1.png",
          title: "狗狗主粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab2.png",
          title: "狗狗零食",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab3.png",
          title: "生活日用",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab4.png",
          title: "狗狗玩具",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab5.png",
          title: "美容护理",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab6.png",
          title: "营养保健",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab7.png",
          title: "清洁消毒",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab8.png",
          title: "医疗用品",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab9.png",
          title: "狗狗活体",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab10.png",
          title: "口碑榜",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab11.png",
          title: "分类",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab12.png",
          title: "狗狗主粮",
        },
      ],
      flag: true,
    };
  },

  methods: {
    dogScroll() {
      let scale =
        (this.$refs.dog.scrollLeft - this.$refs.dog.clientWidth) /
        (this.$refs.ico.scrollLeft - this.$refs.ico.clientWidth);
      this.$refs.ico.scrollLeft = this.$refs.dog.scrollLeft / scale;
    },
    // 这个控制下面的小按钮滚动条，
    icoScroll() {},
    // 点击之后跳转狗狗主粮
    classifyLco(ev) {
      // this.$router.push("/doggoods");
      // console.log(ev);
      if (ev == 0) {
        this.$router.push("/doggoods");
      }
      // 点击分类按钮，跳转商品分类页面
      if (ev == 10) {
        this.$router.push("/classify");
      }
    },
  },
};
</script>
<style lang="less">
.dog-wrap {
  width: 100%;
  height: 180px;
  overflow-y: hidden;
  overflow-x: auto;
  font-size: 13px;
  text-align: center;
  background-color: #fff;
  ul {
    flex-wrap: wrap;
    flex-shrink: 0;
    display: inline-flex;
    width: 125%;
    li {
      flex-basis: 16%;
      height: 67.5px;
      width: 51px;
      margin-top: 10px;
      margin-bottom: 5px;
      img {
        width: 51px;
        height: 51px;
        // margin-bottom: 10px;
      }
    }
  }
}
.dog-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0;
}
.big {
  position: relative;
  // 小小滑动条
  .line {
    width: 20px;
    position: absolute;
    bottom: 0;
    left: 47%;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    // border: 1px solid red;
    .small-line {
      height: 5px;
      min-width: 40px;
    }
  }
}
.line::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.line::-webkit-scrollbar-thumb {
  background-color: #000;
  /*滚动条里面小方块*/
  border-radius: 10px;
  width: 15px;
  background: #191b27;
}
.line::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #e9ebea;
}
</style>
